<script setup>
// Vue3声明响应式数据只有reactive-ref
import { reactive } from 'vue';

/**
 注意点:
 reactive函数只能传入 对象/数组
 reactive函数包裹的数据不能直接赋值(reactive的对象不能够整体赋值 = {   })
 */
const person = reactive({
  name: '张三',
  age: 18
})

const changeName = () => person.name = '李四'
const addAge = () => person.age++
</script>

<template>
  <div>
    <div>{{ person }}</div>
    <button @click="changeName">改名</button>
    <button @click="addAge">增加年龄</button>
  </div>
</template>

<style scoped></style>
